<template>
    <view class="address">
        <view class="address-form">
            <up-form labelPosition="left" labelWidth="160rpx" :model="model1" :rules="rules" ref="formRef">
                <up-form-item label="姓名" prop="userInfo.name" :borderBottom="true">
                    <up-input
                        v-model="model1.userInfo.name"
                        inputAlign="right"
                        placeholder="请输入姓名"
                        border="none"></up-input>
                </up-form-item>
                <up-form-item label="电话" prop="userInfo.phone" :borderBottom="true">
                    <up-input
                        v-model="model1.userInfo.phone"
                        inputAlign="right"
                        placeholder="请输入电话号码"
                        border="none"></up-input>
                </up-form-item>
                <up-form-item label="详细地址" prop="userInfo.address">
                    <up-input
                        v-model="model1.userInfo.address"
                        inputAlign="right"
                        placeholder="请输入详细地址"
                        border="none"></up-input>
                </up-form-item>
            </up-form>
        </view>

        <view class="address-prize address-form">
            <text class="address-prize-title">中奖奖品</text>
            <view class="flex-start-stretch">
                <image class="prize-img" src="http://119.254.154.50:38081/giftApi/mystatic/images/prize.jpg"></image>
                <view class="prize-info flex-c-around-start">
                    <view class="prize-info-name">HUAWEI WATCH GT 4</view>
                    <view class="prize-info-num">X1</view>
                </view>
            </view>
        </view>

        <view class="sumbit" @click="sumbit">提交中奖信息</view>
    </view>
</template>
<script setup>
import api from "@/api";
import { test } from "uview-plus";
import useToast from "@/hooks/useToast";
import { onLoad, onShow } from "@dcloudio/uni-app";
const { submitFail, submitOk } = useToast();
onLoad((option) => {
    model1.value.userInfo.listId = option?.id;
});

const model1 = ref({
    userInfo: {
        name: "",
        phone: "",
        address: "",
        listId: "",
    },
});

const sumbit = async () => {
    if (!test.mobile(model1.value.userInfo.phone)) {
        submitFail("手机号格式不正确！");
        return;
    }

    api.gift.saveAddressPost(model1.value.userInfo).then((result) => {
        uni.showLoading({
            mask: true,
            title: "提交成功",
        });
        setTimeout(() => {
            uni.hideLoading();
            uni.navigateBack();
        }, 1000);
    });
    // const data = await api.gift.saveAddressPost(model1.value.userInfo);
};

const rules = ref({
    "userInfo.name": {
        type: "string",
        required: true,
        message: "请填写姓名",
        trigger: ["blur", "change"],
    },
    "userInfo.phone": {
        type: "string",
        required: true,
        message: "请填写手机号",
        trigger: ["blur", "change"],
    },
    "userInfo.address": {
        type: "string",
        required: true,
        message: "请填写详细地址",
        trigger: ["blur", "change"],
    },
});

// 使用 ref 创建响应式引用
const formRef = ref(null);
</script>
<script>
export default {
    options: {
        styleIsolation: "shared", // 解除样式隔离
    },
};
</script>
<style lang="scss" scoped>
.address {
    padding: 30rpx;
    background: #f6f6f6;
    min-height: 100%;
    box-sizing: border-box;

    .address-form {
        box-sizing: border-box;
        border-radius: 20rpx;
        background: #fff;
        padding: 20rpx;
    }

    .address-prize {
        margin-top: 30rpx;
        color: #444;

        .address-prize-title {
            font-weight: 900;
        }

        .prize-img {
            margin-top: 20rpx;
            width: 200rpx;
            height: 200rpx;
        }

        .prize-info {
            margin-left: 10rpx;

            .prize-info-name {
                font-size: 32rpx;
            }

            .prize-info-num {
                font-size: 28rpx;
                color: #707070;
            }
        }
    }
}

.sumbit {
    margin: 180rpx auto;
    width: 500rpx;
    padding: 20rpx;
    color: #fff;
    text-align: center;
    border-radius: 200rpx;
    background: linear-gradient(to right, rgba(193, 75, 244, 1), rgba(82, 40, 215, 1));
}

::v-deep .u-form-item__body__right__message {
    text-align: end;
}

// ::v-deep .u-form-item__body {
// 	border-bottom: 2rpx solid #e0e0e0;
// }
</style>
